<template>
<div>

  <!-- 面包屑导航区 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图区 -->
  <el-card>

    <!-- 搜索，新增 -->
    <el-row>
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          v-model="queryInfo.query"
          clearable
          @clear="getShopList"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getShopList"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="goToAddPage">新增商品</el-button>
      </el-col>
    </el-row>

    <!-- table 展示 -->
    <el-table
      :data="tableInfo.shopList"
      style="width: 100%"
    >

      <el-table-column type="index" label="序号" width="100"/>
      <el-table-column
        prop="shopName"
        label="商品名称"
        />
      <el-table-column
        prop="shopPrice"
        label="商品价格（元）"
      />
      <el-table-column
        prop="shopWeight"
        label="商品重量"
      />
      <el-table-column
        prop="shopNumber"
        label="商品数量"
      />
      <el-table-column
        prop="date"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{scope.row.shopCreatetime | dataFormat}}
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            @click="handleUpdateClick(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelByIdClick(scope.row.shopId)"
          >
            删除
          </el-button>

        </template>
      </el-table-column>


    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="total, prev, pager, next"
      :total="tableInfo.total"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    >
    </el-pagination>

  </el-card>
</div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      // 查询条件
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      // table 数据
      tableInfo: {
        shopList: [],
        total: 0
      }
      // ----- data end -----
    }
  },
  created() {
    this.getShopList();
  },
  methods: {
    // 获取商品列表
    async getShopList() {
      const {data:res} = await this.$http({
        url: `/shop/getShopList`,
        method: 'get',
        params: this.queryInfo
      });

      if(!res.status) return this.$message.error(res.message);
      this.$message.success(res.message);
      this.tableInfo.shopList = res.data.shopList;
    },
    // 分页， 当前页
    handleCurrentChange(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getShopList();
    },
    // 分页，前一页
    handlePrevClick(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getShopList();
    },
    // 分页，下一页
    handleNextClick(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getShopList();
    },
    // 更新
    handleUpdateClick(row) {
      console.log(row);
    },
    // 删除
    async handleDelByIdClick(id) {
      console.log(id);
      const confirmStr = await this.$confirm(
        '此操作将删除该商品，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning"
        }
      ).catch(err => err);

      if (confirmStr !== 'confirm') {
        return this.$message.info('已经取消删除');
      }

      const {data:res} = await this.$http({
        url: `/shop/delShop`,
        method: 'delete',
        params: {'id': id}
      });

      if (!res.status) return this.$message.error(res.message);
      this.$message.success(res.message);

      await this.getShopList();
    },
    // 跳转到新增页面
    goToAddPage() {
      this.$router.push("/shop/add")
    }
    // ----- method end -----
  }
}
</script>

<style scoped>

</style>
